<template>
  <div class="salaryPK">
    <div class="salaryPKTitle">
      查薪酬
    </div>
    <div class="salaryPKContent">
      <el-form ref="form" :model="form">
        <el-form-item label="专业" label-width="40px">
          <el-input v-model="form.majorName" readonly size="small" filterable placeholder="请选择专业"
            @click.native="SelectMajorDialogVisible=true" suffix-icon="el-icon-arrow-down">
          </el-input>
        </el-form-item>
        <el-form-item label="职业" label-width="40px">
          <el-input v-model="form.positionName" readonly size="small" filterable placeholder="请选择职业"
            @click.native="handleOpenPositionSelect" suffix-icon="el-icon-arrow-down">
          </el-input>
        </el-form-item>
        <el-form-item label="城市" label-width="40px">
          <el-select v-model="form.fakeRegionIds" filterable multiple :multiple-limit="5" default-first-option
            collapse-tags size="small" placeholder="可多选城市" @change="handleRegionChange">
            <el-option v-for="item in regionList" :key="item.value" :label="item.label"
              :value="item.value+'-'+item.label">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" plain @click="handleSalaryPKConfirm()" class="salaryPKButton">我要查薪酬 ></el-button>
        </el-form-item>
      </el-form>
    </div>
    <SelectMajorDialog :visible.sync="SelectMajorDialogVisible" @confirm="handleSelectMajorConfirm"></SelectMajorDialog>
    <SelectPositionDialog :majorId="form.majorId" :visible.sync="SelectPositionDialogVisible"
      @confirm="handleSelectPositionConfirm">
    </SelectPositionDialog>
  </div>
</template>

<script>
import SelectMajorDialog from "@/views/home/components/hotJob/components/SelectMajorDialog";
import SelectPositionDialog from "@/views/home/components/hotJob/components/SelectPositionDialog";
export default {
  name: "salaryPK",
  components: {
    SelectMajorDialog,
    SelectPositionDialog,
  },
  data() {
    return {
      SelectMajorDialogVisible: false,
      SelectPositionDialogVisible: false,
      form: {
        majorName: "",
        majorId: "",
        positionName: "",
        positionId: "",
        fakeRegionIds: [],
        realRegionIds: "",
      },
      icon: require("@/assets/home/salaryPKTitleIcon.png"),
      majorList: [],
      positionList: [],
      regionList: [
        {
          value: "100000",
          label: "全国",
        },
        {
          value: "110000",
          label: "北京",
        },
        { value: "310000", label: "上海" },
        {
          value: "440100",
          label: "广州",
        },
        {
          value: "440300",
          label: "深圳",
        },
        {
          value: "510100",
          label: "成都",
        },
        { value: "500000", label: "重庆" },
        { value: "330100", label: "杭州" },
        { value: "610100", label: "西安" },
        {
          value: "420100",
          label: "武汉",
        },
        {
          value: "320500",
          label: "苏州",
        },
        { value: "410100", label: "郑州" },
        { value: "320100", label: "南京" },
        {
          value: "120000",
          label: "天津",
        },
        { value: "430100", label: "长沙" },
        { value: "441900", label: "东莞" },
        {
          value: "330200",
          label: "宁波",
        },
        { value: "440600", label: "佛山" },
        {
          value: "340100",
          label: "合肥",
        },
        { value: "370200", label: "青岛" },
        {
          value: "530100",
          label: "昆明",
        },
        {
          value: "210100",
          label: "沈阳",
        },
        {
          value: "370100",
          label: "济南",
        },
        {
          value: "320200",
          label: "无锡",
        },
        {
          value: "350200",
          label: "厦门",
        },
        {
          value: "350100",
          label: "福州",
        },
        {
          value: "330300",
          label: "温州",
        },
        {
          value: "330700",
          label: "金华",
        },
        {
          value: "230100",
          label: "哈尔滨",
        },
        {
          value: "210200",
          label: "大连",
        },
        {
          value: "520100",
          label: "贵阳",
        },
        {
          value: "450100",
          label: "南宁",
        },
        { value: "350500", label: "泉州" },
        {
          value: "130100",
          label: "石家庄",
        },
        { value: "220100", label: "长春" },
        { value: "360100", label: "南昌" },
        { value: "441300", label: "惠州" },
        { value: "320400", label: "常州" },
        { value: "330400", label: "嘉兴" },
        { value: "320300", label: "徐州" },
        { value: "320600", label: "南通" },
        { value: "140100", label: "太原" },
        { value: "130600", label: "保定" },
        { value: "440400", label: "珠海" },
        { value: "442000", label: "中山" },
        {
          value: "620100",
          label: "兰州",
        },
        {
          value: "371300",
          label: "临沂",
        },
        { value: "370700", label: "潍坊" },
        { value: "370600", label: "烟台" },
        { value: "330600", label: "绍兴" },
      ],
    };
  },
  methods: {
    handleOpenPositionSelect() {
      // if (!this.form.majorId) {
      //   this.$message.warning("请先选择专业");
      //   return;
      // }
      this.SelectPositionDialogVisible = true;
    },
    handleSelectPositionConfirm(val) {
      //console.log("handleSelectPositionConfirm", val);
      this.form.positionName = val[0].navName;
      this.form.positionId = val[0].valueId; //注意是valueId
    },
    handleSelectMajorConfirm(val) {
      //console.log("handleSelectMajorConfirm", val[0].depName);

      this.form.majorName = val[0].depName;
      this.form.majorId = val[0].depId;
    },
    handleRegionChange(val) {
      //单个必须是 regionId-城市名字 是形式,多个就用逗号隔开
      //例如 110000-北京,500000-重庆,330100-杭州,610100-西安
      //console.log("handleRegionChange", val);
      this.form.realRegionIds = val.join(",");
    },
    handleSalaryPKConfirm() {
      if (!this.form.positionId || !this.form.positionName) {
        this.$message.error("请选择职业");
        return;
      }
      this.$emit("handleSalaryPKConfirm");
      this.$bus.$emit("generalReportAction", {
        etId: localStorage.getItem("roleType")==20?40010:40016,
        personId: localStorage.getItem("personId"),
        cardType: localStorage.getItem("cardType"),
        jumpSource:60,
        sourceType:60
        });
      let routeData = this.$router.resolve({
        path: "/position-detail",
        query: {
          jumpTab: "salary",
          regionIds: this.form.realRegionIds.length
            ? this.form.realRegionIds
            : "100000-全国",
          id: this.form.positionId,
          name: this.form.positionName,
          collect: 0,
          superToken: this.$route.query.superToken || "",
          SecretKey: this.$route.query.SecretKey || "",
          customerName: this.$route.query.customerName,
        },
      });
      window.open(routeData.href, "_blank");
      this.form = {
        majorName: "",
        majorId: "",
        positionName: "",
        positionId: "",
        fakeRegionIds: [],
        realRegionIds: "",
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.salaryPK {
  display: flex;
  flex-direction: column;
  height: 254px;
  .salaryPKTitle {
    color: #100f0f;
    font-size: 16px;
    font-weight: 800;
    line-height: 22px;
    height: 20px;
    display: flex;
    align-items: center;
    .titleIcon {
      height: 18px;
      width: 18px;
      margin-right: 12px;
    }
  }
  .salaryPKContent {
    margin-top: 18px;
    ::v-deep .el-input__inner {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #999999;
      line-height: 22px;
      text-align: left;
      font-style: normal;
    }
    .salaryPKButton {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 36px;
      border-radius: 8px;
      border: 1px solid #4880ff;
      color: #4880ff;
      background: rgba(72, 128, 255, 0.05);
      &:hover {
        color: #4880ff;
        background: rgba(72, 128, 255, 0.05);
      }
      &:focus {
        color: #4880ff;
        background: rgba(72, 128, 255, 0.05);
      }
      &:active {
        color: #4880ff;
        background: rgba(72, 128, 255, 0.05);
      }
    }
    ::v-deep .el-form-item {
      margin-bottom: 6px;
      &:last-of-type {
        margin-bottom: 0px;
      }
    }
    ::v-deep .el-form-item__label {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 15px;
      color: #222222;
      font-style: normal;
      padding-right: 8px;
    }
    ::v-deep .el-input__inner {
      border: 1px solid #e4edf8;
      border-radius: 4px;
      // background: #fafcfe;
      padding: 5px 8px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #999999;
      line-height: 22px;
      text-align: left;
      font-style: normal;
      padding-right: 32px;
    }
    ::v-deep .el-input__suffix {
      top: -2px;
    }
  }
}
</style>